Add deferred payment methods for web #1881

EduardDumitrescu · 2024-08-05T07:32:16Z

Hello,

I've created a branch which exposes methods that would let a developer do a deferred payment on web using the new interop way.

… into main # Conflicts: # packages/stripe/CHANGELOG.md # packages/stripe/pubspec.yaml # packages/stripe_android/CHANGELOG.md # packages/stripe_android/pubspec.yaml # packages/stripe_platform_interface/pubspec.yaml # packages/stripe_web/pubspec.yaml

# Conflicts: # packages/stripe_android/CHANGELOG.md

… into web_deffered_payment # Conflicts: # packages/stripe/pubspec.yaml # packages/stripe_android/CHANGELOG.md # packages/stripe_android/pubspec.yaml # packages/stripe_js/CHANGELOG.md # packages/stripe_js/lib/src/js/elements/element_creation_options.dart # packages/stripe_js/lib/src/js/payment_requests/payment_request.dart # packages/stripe_js/pubspec.yaml # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_platform_interface/lib/src/models/payment_sheet.dart # packages/stripe_platform_interface/lib/src/models/payment_sheet.freezed.dart # packages/stripe_platform_interface/lib/src/models/payment_sheet.g.dart # packages/stripe_platform_interface/pubspec.yaml # packages/stripe_web/CHANGELOG.md # packages/stripe_web/lib/src/widgets/payment_element.dart # packages/stripe_web/pubspec.yaml

… into web_deffered_payment # Conflicts: # packages/stripe/CHANGELOG.md # packages/stripe/lib/src/stripe.dart # packages/stripe/pubspec.yaml # packages/stripe_js/CHANGELOG.md # packages/stripe_js/lib/src/js/elements/element_creation_options.dart # packages/stripe_js/pubspec.yaml # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_platform_interface/pubspec.yaml # packages/stripe_web/CHANGELOG.md # packages/stripe_web/lib/src/widgets/payment_element.dart # packages/stripe_web/pubspec.yaml

… into web_deffered_payment # Conflicts: # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_web/pubspec.yaml

… into web_deffered_payment # Conflicts: # packages/stripe/CHANGELOG.md # packages/stripe/pubspec.yaml # packages/stripe_js/CHANGELOG.md # packages/stripe_js/lib/src/api/payment_intents/confirm_payment_options.freezed.dart # packages/stripe_js/lib/src/js/elements/elements.dart # packages/stripe_js/pubspec.yaml # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_web/CHANGELOG.md # packages/stripe_web/lib/src/widgets/payment_element.dart # packages/stripe_web/pubspec.yaml

dhoffer · 2024-11-28T18:29:04Z

Hi @EduardDumitrescu I am trying to implement Flutter web for Stripe CC payments. Sounlds like you are way ahead of me in implementing this. Could you send me your code that handles the Stripe CC payments for Flutter web? My email is [email protected], much appreciated.

… into web_deffered_payment # Conflicts: # packages/stripe/CHANGELOG.md # packages/stripe/pubspec.yaml # packages/stripe_js/CHANGELOG.md # packages/stripe_js/pubspec.yaml # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_platform_interface/pubspec.yaml # packages/stripe_web/CHANGELOG.md # packages/stripe_web/lib/src/web_stripe.dart # packages/stripe_web/lib/src/widgets/payment_element.dart # packages/stripe_web/pubspec.yaml

ciprig · 2025-07-10T09:38:33Z

Hi @remonh87 ,

Just checking in on this PR. This is a crucial fix for the Stripe deferred payments support on web.

We wanted to let you know that we have successfully deployed and validated this exact code in our production application, so we're confident in its stability.

The branch is updated and ready for review. Please let us know if there's anything we can do to help get this merged.

Thank you!

remonh87

thanks for the PR I think overall it looks good just left some remarks

remonh87 · 2025-07-10T17:18:14Z

packages/stripe/pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_stripe
 description: Flutter library for Stripe. Supports PaymentSheets, Apple & Google Pay, SCA, PSD2 and much more.
-version: 11.5.1
+version: 11.6.0


Let’s not bump the version we will do this when we release

remonh87 · 2025-07-12T08:39:43Z

packages/stripe_js/lib/src/api/payment_intents/confirm_payment_options.dart

@@ -11,6 +10,7 @@ class ConfirmPaymentOptions with _$ConfirmPaymentOptions {
  const factory ConfirmPaymentOptions({
    /// The Elements instance that was used to create the Payment Element.
    @ElementsConverter() required Elements elements,
+    String? clientSecret,


good catch!

Nit: let's add a doc here

The PaymentIntent's client secret.

remonh87 · 2025-07-12T08:40:33Z

packages/stripe/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 11.6.0


We will define the version (I think we want to add some more) to this can be removed

remonh87 · 2025-07-12T08:47:01Z

packages/stripe_js/pubspec.yaml

@@ -1,6 +1,6 @@
 name: stripe_js
 description: Stripe.js bindings for dart. This package is used by Stripe web so that the Stripe js sdk can be invoked directly.
-version: 6.4.0
+version: 6.4.1


same here not needed to add a version

remonh87 · 2025-07-12T08:49:32Z

packages/stripe_platform_interface/lib/src/method_channel_stripe.dart

@@ -101,6 +102,19 @@ class MethodChannelStripe extends StripePlatform {
        .parse(result: result!, successResultKey: 'paymentMethod');
  }

+  @override
+  Future<PaymentMethod> createPaymentMethodWithElements() =>


I do not prefer to add this method as we really want to stay close to the stripe react native implementation here.

remonh87 · 2025-07-12T08:50:48Z

packages/stripe_platform_interface/lib/src/method_channel_stripe.dart

@@ -427,6 +441,28 @@ class MethodChannelStripe extends StripePlatform {
    return isSupported ?? false;
  }

+  @override
+  Future<AvailableMobilePayOptions> availableMobilePayOptions({


what is the use of this method? we have a function called: isPlatformPaySupported

@remonh87 I have exposed this method as well so it would be easier for a consumer to show hide google/apple pay buttons. With just isPlatformPaySupported you would have to do something like

if(isPlatformPaySupported && Platform.isAndroid) GooglePayButtonWidget()
instead of

if(availableMobilePayOptions.googlePay) GooglePayButtonWidget()

I believe I have addressed most of the comments so the merge request can be reviewed again. The only problem after the refactor was that after eliminating everything 'createPaymentMethodWithElements' related so that only 'createPaymentMethod' would remain I had to add an extra constructor to CreatePaymentMethodData which would handle the elements case. When multiple constructors are used freezed generates an extra 'runtimeType' parameter(when doing toJson) which was causing the js stripe method 'createPaymentMethod' to fail. I haven't been able to find anything in freezed which would allow me to remove that 'runtimeType' field so I removed it manually inside 'createPaymentMethod' from 'ExtensionCreatePaymentMethod'(not a very clean approach). Another approach would be to create another method inside 'ExtensionCreatePaymentMethod' which does the same thing as the existing one but receives another model with just the elements data(something like 'CreatePaymentMethodDataWithElements'). I'm open to any suggestion or approach or could leave it like this if you find it to be good enough.

remonh87 · 2025-07-12T08:54:44Z

packages/stripe_web/lib/src/widgets/payment_element.dart


  const PaymentElement({
    super.key,
-    required this.clientSecret,
+    this.clientSecret,


I am thinking maybe we should split the widget into two constructors to make it clear for consumer what to add. In case for:

without intent => mode, anount and currency are required

with intent => client secret is required.

…effered_payment

… into web_deffered_payment # Conflicts: # packages/stripe_js/lib/src/api/payment_intents/confirm_payment_options.freezed.dart # packages/stripe_js/lib/src/api/payment_intents/confirm_payment_options.g.dart # packages/stripe_js/lib/src/api/payment_methods/create_payment_method_data.dart # packages/stripe_js/lib/src/api/payment_methods/create_payment_method_data.freezed.dart # packages/stripe_js/lib/src/api/payment_methods/create_payment_method_data.g.dart # packages/stripe_js/lib/src/api/payment_methods/payment_method.freezed.dart # packages/stripe_js/lib/src/api/payment_methods/payment_method.g.dart # packages/stripe_js/lib/src/js/payment_methods/create_payment_method.dart # packages/stripe_platform_interface/lib/src/models/payment_methods.freezed.dart # packages/stripe_platform_interface/lib/src/models/payment_methods.g.dart

EduardDumitrescu and others added 30 commits June 10, 2024 11:14

add jsonarray case

07af94b

update pubspec name

265bc9a

revert pubspec name

787fe3f

bump version

75eb561

update used android version

444e7fc

update changelog

dfd9eff

add temporary run on ui

cfa369e

set include if null to false

0a9fc5e

add creation options

da0e10c

add confirm payment method

d2a5ec7

add client secret to confirm payment options

bfcc58c

make client secret optional

8457ab5

fix payment element client secret error

2f4a9b2

add handle next action

674ef1e

use map for handle next action

4fc31dd

use jsify on map

8037745

add retrieve payment intent

da70e73

move methods to platform interface

d55b5b2

export element appearance

e8fdc96

expose locale

4cef409

expose billing info

95b0dc1

add update locale for android

8514e41

Merge branch 'main' of https://github.com/flutter-stripe/flutter_stripe

7129309

# Conflicts: # packages/stripe_android/CHANGELOG.md

add changelogs

e8de3e7

refactor to fix payment request no such method on web release

272c61a

expose available mobile pay

37e7f81

cleanup after interop merge

3457442

resolve compilation errors

41cc5dd

EduardDumitrescu mentioned this pull request Aug 8, 2024

[Web] retrievePaymentIntent + handleNextAction #1746

Open

Eduard Dumitrescu added 3 commits September 25, 2024 10:35

fix merge errors

999e320

Merge branch 'main' of https://github.com/flutter-stripe/flutter_stripe…

2ac8be2

… into web_deffered_payment # Conflicts: # packages/stripe_platform_interface/CHANGELOG.md # packages/stripe_web/pubspec.yaml

clintdoriot mentioned this pull request Oct 24, 2024

Web PaymentElement to support SetupIntent #1939

Open

Eduard Dumitrescu added 6 commits October 30, 2024 14:40

fix build error after merge

8b85bde

remove unused import on elements_submit.dart

05367ef

remove unused import on create_payment_method_with_elements.dart

ea03ab0

expose wallets models

0990bf1

add default value to payment method

0221611

Eduard Dumitrescu and others added 3 commits June 3, 2025 11:45

fix init payment sheet error

62cd8a3

Merge branch 'main' into web_deffered_payment

f483011

remonh87 requested changes Jul 12, 2025

View reviewed changes

Eduard Dumitrescu added 8 commits August 5, 2025 15:46

remove versioning

d939152

Merge remote-tracking branch 'origin/web_deffered_payment' into web_d…

85eca7c

…effered_payment

different constructors for payment element widget

f2c0ae7

use existing create payment method

b8fef25

remove runtime type from toJson

896c2c6

remove runtime type in payment method

7f348bc

generate files after merge

a959ad4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add deferred payment methods for web #1881

Add deferred payment methods for web #1881

Uh oh!

EduardDumitrescu commented Aug 5, 2024

Uh oh!

dhoffer commented Nov 28, 2024

Uh oh!

ciprig commented Jul 10, 2025

Uh oh!

remonh87 left a comment

Uh oh!

remonh87 Jul 10, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

EduardDumitrescu Aug 8, 2025

Uh oh!

remonh87 Jul 12, 2025

Uh oh!

Uh oh!

Uh oh!

Add deferred payment methods for web #1881

Are you sure you want to change the base?

Add deferred payment methods for web #1881

Uh oh!

Conversation

EduardDumitrescu commented Aug 5, 2024

Uh oh!

dhoffer commented Nov 28, 2024

Uh oh!

ciprig commented Jul 10, 2025

Uh oh!

remonh87 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!